<template>
    <div class="footer-main" v-if="todoArr.length">
        <input type="checkbox" :checked="isAll" @change="checks">
        已完成<span>{{doneTodo}}</span>/
        全部<span>{{todoArr.length}}</span>
        <input type="button" value="清除已完成任务" @click="clearAll">
    </div>
</template>

<script>
    export default {
        name: 'MyFooter',
        props:['todoArr','checkAll','clearDone'],
        data() {
            return {
                yesData: 2,
                allData: 5
            }
        },
        computed:{
            doneTodo(){
                let count = 0;
                this.todoArr.forEach(item => {
                    if(item.done === true){
                        count++
                    }
                });
                return count;
            },
            // 判断下面的checked需不需要勾选
            isAll(){
                return this.doneTodo === this.todoArr.length;
            }
        },
        methods: {
            checks(e){
                this.checkAll(e.target.checked);
            },
            // 清除已经完成
            clearAll(){
                this.clearDone();
            }
        },
    }
</script>

<style lang="scss" scoped>
    .footer-main{
        width: 475px;
        height: 50px;
        margin: 8px 0 8px 0;
        line-height: 50px;
        font-size: 20px;
        color: #999;
        position: relative;
        // border: 1px solid gold;
        span{
            color: rgb(255, 115, 0);
        }
        input[type=button]{
            color: rgb(52, 161, 140);
            height: 30px;
            outline: none;
            border: none;
            background-color: transparent;
            border-radius: 3px;
            // background: hotpink;
            border: 1px solid blueviolet;
            float: right;
            margin: 10px 0px;
            padding: 0 5px 0 5px;
            transition: all .3s linear;
        }
        input[type=checkbox]{
            border: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            position: inherit;
            top: 5px;
            display: inline-block;
            margin-right: 15px;
            border: 1px solid #999;
        }
        input[type=checkbox]:checked{
            background: blueviolet;
        }
        input[type=button]:hover{
            color: #fff;
            background-color: blueviolet;
        }
    }
</style>